<template>
  <div class="home">
    <div class="header">
      <div class="logo">
        <i class="logo1 iconfont icon-bilibili"></i>
        <div class="login">
          <i class="large iconfont icon-fangdajing"></i>
          <p>登录</p>
          <h3>下载APP</h3>
        </div>
      </div>
      <!-- 导航 -->
      <van-tabs>
        <van-tab v-for="item in navs" :title="item.text" :key="item.id">
          {{ item.text }}
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from "vue";
import navs from "@/utils/navsItem";
const { $request } = getCurrentInstance().appContext.config.globalProperties;

let data = reactive({
  list: [],
});

$request(
  "https://api.bilibili.com/pgc/web/timeline/v2?day_before=2&day_after=4&season_type=1",
  "GET"
).then((data) => {
  // console.log(data);
  data.list = data.data;
  console.log(data.list);
});
// });
</script>
<style lang="less">
.home {
  .header {
    padding: 10px;
    .logo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      background-color: aqua;
      .logo1 {
        width: 60%;
        font-size: 28px;
        color: #fb7299;
      }
      .login {
        width: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .large {
          font-size: 22px;
          color: #eee;
        }
        P {
          width: 24px;
          line-height: 24px;
          height: 24px;
          text-align: center;
          border-radius: 50%;
          background-color: #eee;
          color: #fb7299;
          font-size: 8px;
        }
        h3 {
          width: 76px;
          height: 24px;
          line-height: 24px;
          background-color: #fb7299;
          border-radius: 5px;
          font-size: 10px;
          color: white;
          font-weight: normal;
          text-align: center;
        }
      }
    }
  }
}
</style>
